<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">


    <h:form id="asignacionConstrucciones" >
        <center>
            <p:growl id="myGrowl" showDetail="true" globalOnly="true" life="2000"/>
        </center>
        <center>
            <p:panelGrid style="width: 80%; font-size: 12px">
                <f:facet name="header">
                    <p:row>
                        <p:column colspan="6">Asignación de materiales para la construcción</p:column>
                    </p:row>
                </f:facet>


                <p:row>
                    <p:column>
                        <h:outputLabel  value="Buscar:" />
                    </p:column>

                </p:row>
                <p:row>
                    <p:column>
                        <p:outputLabel value="Construcción"></p:outputLabel>
                        <p:selectOneMenu style="font-size: 12px" required="true" 
                                         id="construccion" 
                                         requiredMessage="#{msg.requiredSelect}"
                                         converter="construccionConverter" 
                                         value="#{gestionarAsignacionTransporteMovilizacion.construccionSelected}">  
                            <f:selectItem  itemLabel="--Seleccione una construcción--" itemValue="" />  
                            <f:selectItems value="#{gestionarAsignacionTransporteMovilizacion.listaConstrucciones}" var="construccion" 
                                           itemValue="#{construccion}" itemLabel="#{construccion.nombreConstruccion}"></f:selectItems>
                        </p:selectOneMenu> 
                        <p:message for="construccion" id="construccionmsg"></p:message>
                        <p:commandButton value="Actualizar " actionListener="#{actualizarInformacion}"
                                         process="@this"
                                         update="dataMateriales,construccion" 
                                         />
                    </p:column>
                    
                </p:row>
                <p:row rendered="false">
                    <p:column>
                        <p:dataTable id="dataTableVoluntarios" rows="30" value="#{gestionarAsignacionTransporteMovilizacion.listaVoluntarios}" var="voluntario" paginator="true"
                                     paginatorAlwaysVisible="false" emptyMessage="No se han registrados voluntarios para la construcción">                                

                            <p:column id="nombreTipoVoluntario" headerText="Tipo de Voluntario" >
                                <h:outputText value="#{voluntario.tipoVoluntario.nombreTipoVoluntario}"/>
                            </p:column>
                            <p:column headerText="Cantidad">
                                <p:inputText id="cantidadVoluntarios" value="#{voluntario.cantidadVoluntarios}" size="5" 
                                             required="true" converterMessage="#{msg.numberFormat}" 
                                             requiredMessage="#{msg.requiredField}"/>
                                <p:message for="cantidadVoluntarios" id="cantidadVoluntariosmsg"/>
                            </p:column>
                        </p:dataTable>
                    </p:column>
                </p:row>


                <p:row>
                    <p:column colspan="3">
                        <p:outputLabel value="Seleccione los vehiculos a asignar a la construcción"></p:outputLabel>
                        <br></br>
                        <p:pickList style="text-align: center" id="dataMateriales"
                                    required="true"
                                    validatorMessage="#{msg.requiredPicklist}"
                                    value="#{gestionarAsignacionTransporteMovilizacion.pickListMaterialConstruccion.materialConstruccion}" 
                                    converter="materialConstruccionConverter"  var="materialConstruccion"
                                    addLabel="Agregar" removeLabel="Quitar" removeAllLabel="Quitar todos" 
                                    addAllLabel="Agregar todos"
                                    itemLabel="#{materialConstruccion.nombreMaterial}" onTransfer="ajaxSubmit()"
                                    itemValue="#{materialConstruccion}" 
                                    validator="pickListMaterialConstruccion"
                                    showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains">
                            <f:facet name="sourceCaption">Disponibles</f:facet>  
                            <f:facet name="targetCaption">Seleccionados</f:facet> 
                            <p:ajax event="transfer" listener="#{asignacionTransporteMovilizacion.handleTransfer}" update="dataTableMaterialesConstruccion" /> 
                        </p:pickList>
                        <p:message id="msgpick" for="dataMateriales"/>
                        <p:remoteCommand name="ajaxSubmit"/>
                    </p:column>

                </p:row>

                <p:row>
                    <p:column>
                        <p:dataTable id="dataTableMaterialesConstruccion" rows="30" value="#{gestionarAsignacionTransporteMovilizacion.listaModificableMaterialesConstruccion}" var="material" paginator="true"
                                     paginatorAlwaysVisible="false" emptyMessage="No se han seleccionado materiales para la construcción">                                

                            <p:column id="nombreTipoVoluntario" headerText="Nombre material de construcción" >
                                <h:outputText value="#{material.idMaterialConstruccionConstruccionMaterialConstruccion.nombreMaterial}"/>
                            </p:column>
                            <p:column headerText="Cantidad Disponible">
                                <h:outputText value="#{material.idMaterialConstruccionConstruccionMaterialConstruccion.cantidadDisponible}" />
                            </p:column>

                            <p:column headerText="Cantidad Asignada">
                                <p:inputText id="cantidadAsignada" value="#{material.cantidadMaterialAsignadaConstruccion}" size="5" 
                                             required="true" converterMessage="#{msg.numberFormat}" 
                                             requiredMessage="#{msg.requiredField}">
                                    <p:ajax event="blur" process="@this" global="false" update="@this"/>
                                </p:inputText>
                                <p:message for="cantidadAsignada" id="cantidadAsignadamsg"/>
                            </p:column>
                        </p:dataTable>
                    </p:column>
                </p:row>

                <p:row >
                    <p:column colspan="5" style="text-align: left">
                        <p:commandButton value="Guardar" 
                                         process="@this,dataMateriales,dataTableVoluntarios,construccion" 
                                         update="dataTableVoluntarios,msgpick,construccionmsg,myGrowl,dataMateriales,dataTableMaterialesConstruccion"
                                         actionListener="#{guardarTransporteAsignacion}"/>
                    </p:column>
                </p:row>
            </p:panelGrid>

        </center>

        <br></br>
        <br></br>


    </h:form>
</html>
